<template>
  <div>
	  <el-container style="height: 100vh;">
        <el-header height="105px" style="padding: 0; display: flex; flex-direction: row; border-bottom: 1px solid #c6c9d0; min-width: 1400px;background-color: #D2B09B;">
			<div style="align-self: center;flex: 2;">
				<img style="height: 85px;width: 105px;margin-top:10px;margin-left:25px"
				src="C:\Users\Administrator\Desktop\front-side\ClientSide\src\assets\images\bk-logo.png" />
			</div>
			<div style="flex: 3; align-self: center;font-family: 'Arial', sans-serif; color: white;font-weight: bold; ">
				欢迎登录血耳商城
			</div>
			<div style="background-color: #d3d3d3; flex: 5;color: white;">
				<el-menu
				router
				style="height: 105px;background-color: #D2B09B;"
				default-active="/index"
				mode="horizontal"
				:ellipsis="false"
				@select="handleSelect"
				>
					<el-menu-item index="/" style="color: white;">首页</el-menu-item>
					<el-menu-item index="/goods" style="color: white;">全部商品</el-menu-item>
					<el-menu-item index="/orders" style="color: white;">我的订单</el-menu-item>
					<el-menu-item index="/user" style="color: white;">个人中心</el-menu-item>
					
				</el-menu>
			</div>
			
			<div style="align-self: center;flex: 4; margin-left: 60px;">
				<el-input style="height: 40px;" v-model="SearchKey" placeholder="请输入想了解的商品名称">
					<template #append>
					        <el-button :icon="Search" @click="searchthing" plain style="width: 55px; height: 40px; border-radius: 0 5px 5px 0; background-color: #06b5ff; color: #FFFFFF;"/>
					</template>
				</el-input>				
			</div>
			
			<div style="flex: 1;"></div>
			<div style="flex: 1; align-self: center;">
			    <el-popover
			        :visible="visible"
			        placement="bottom"
			        title="用户名"
			        :width="200"
			        content="用户信息"
			      >
			        <template #reference>
			          <el-avatar :icon="UserFilled" @mouseenter="visible = ture">
			          </el-avatar>
			        </template>
			      </el-popover>  
			</div>
			<div style="flex: 3; align-self: center; ">
					<el-button style="margin-right: 10px;" type="primary" circle plain @click="cart">
						 <el-icon size="large" style="margin-right: 2px;"><ShoppingCart /></el-icon>
					</el-button>
					<span style="margin-left: 10px;margin-right: 20px; color: #cccccc; font-size: 1.5rem; cursor: default;">|</span>
					<a v-if="log" @click="logout">退出登录</a>
					<a v-else href="/login" style="color: white;">用户登录</a>
					<!--<a @click="logout">退出</a>-->

			</div>
		</el-header>
        <el-main style=" display: flex; flex-direction: column; padding: 0; min-width: 1400px;" >
			
			<router-view></router-view>
		</el-main>
      </el-container>
  </div>
</template>

<script setup>
	
import { UserFilled } from '@element-plus/icons-vue'
import { Search,ShoppingCart } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import router from '@/router';
import { useRoute } from 'vue-router';


import VueCookie from 'vue-cookie';
import { ElMessage, ElMessageBox } from 'element-plus';
const SearchKey = ref('')
const log = ref()
const visible = ref(false)
loginOrNot()
function loginOrNot(){
	const token = VueCookie.get('token')
	if(token){
		log.value=true
	}
	else{
		log.value=false
	}
}
function logout(){
	
    ElMessageBox.confirm(
        '是否退出登录',
        'Warning',
        {
          confirmButtonText: '退出',
          cancelButtonText: '再想想',
          type: 'warning',
        }
      )
        .then(() => {
			window.sessionStorage.clear();
			VueCookie.delete('token');
			const token0 = VueCookie.get('token')
			if(token0!==null){
				ElMessage({
				  type: 'error',
				  message: '退出登录失败',
				})
				loginOrNot()
			}
			else{
				ElMessage({
            type: 'success',
            message: '您已退出登录',
          })
		  router.push({ name: 'Indexmainfooter' })
		  loginOrNot()
		  }
          
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '您以放弃退出登录',
          })
        })
}

function searchthing(){
	if(SearchKey.value.trim()!==''){
		router.push({
			path:'/goods',
			query:{SearchKey:SearchKey.value}
		})
	}
}
function cart(){
	router.push({ name: 'CartIndex'})
}
</script>
<style scoped lang="scss">

</style>